<template>
    <div class="login-page">
        <div class="login-box">
			<div class="login-logo">
				<img src="../../assets/image/logo.png" alt="">
			</div>
            <div class="input-form">
                <!-- <div class="are" @click="$router.push('/country')">{{getAre}}<i class="cubeic-pulldown"></i></div> -->
                <div><input type="text" class="input-control" v-model.trim="username" placeholder="请输入手机号" autocomplete="new-phone"></div>
            </div>
            <div class="input-form">
                <div><input type="text" class="input-control code" v-model.trim="code" @keyup.enter="submit" placeholder="输入短信验证码" autocomplete="new-code"></div>
                <button type="button" class="getcode"  @click="getcode">{{codetext}}</button>
            </div>
			<div>
				<router-link to="/pwdlogin" class="pwdlogin"><i class="iconfont icon-mima"></i>密码登录</router-link>
			</div>
            <div class="login-btn">
                <button type="button" class="login-submit" @click="submit"><cube-loading v-show="loading"></cube-loading>登录</button>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
.login-page{
    width 100%
    height 100%
    // background-image: linear-gradient(to bottom, #782be9, #6456fd)
	background:#fefefe;
    position relative
    display flex
    align-items center
    justify-content center
    .login-box{
        width 300px
        .intro{
            font-size 14px 
            color #fff
            margin-bottom 15px
        }
		.login-logo{
			img{
				display:block;
				width:80px;
				margin:0 auto;
			}
		}
        .input-form{
            // background rgba(69, 0, 170, 0.37)
			border-bottom:1px solid #e1e1e1;
            width 100%
            margin-bottom 10px
            display flex
            justify-content flex-start
            height 50px
            line-height 50px
            .are{
                width 70px
                padding 0 10px
                color #fff
                font-size 16px
            }
            .input-control{
                width 300px
                height 50px
                border 0
                outline none
                background transparent
                color #333
                font-size 16px
                vertical-align top
                padding 0 10px
                &.code{
                    width 200px
                }
                &::-webkit-input-placeholder{
                    color #999
                    font-size 16px
                }
            }
            .getcode{
                width 100px
                color #333
                font-size 14px
                outline none 
                border 0
                background transparent
                position relative
                &:before{
                    display block
                    content ""
                    width 1px
                    height 20px
                    background #eee
                    position absolute
                    top 15px
                    left 0
                }
            }
        }
        .login-btn{
            width 90%
			margin:20px auto 0;
            .login-submit{
                color #ffffff
                background-image: linear-gradient(to bottom, #0392b7, #3563db)
                width 100%
                height 40px
                border-radius 5px
                border 0 
                outline none
                font-size 16px
                font-weight 800
                display flex
                align-items center
                justify-content center
                .cube-loading{
                    margin-right 10px
                }
            }
        }
		.pwdlogin{
			font-size:14px;
			color:#555;
			display:flex;
			align-items:center;
			i{
				margin-right:5px;
				font-size:16px;
			}
		}
	}
}
</style>

<script>
import {mapGetters} from 'vuex'
export default {
    data(){
        return {
            username:'',
            code:"",
            phone:'',
            flag:true,
            codetext:'获取验证码',
            loading:false,
            loginfag:true
        }
    },
    computed:{
        ...mapGetters([
            'getAre'
        ])
    },
    watch:{
        username(val){
            this.phone = this.username;
        }
    },
    methods:{
        getcode(){
            var myreg=/^[1][1-9][0-9]{9}$/;
            if(!myreg.test(this.username)){
                this.createToast('手机格式不正确','error')
                return ;
            }
			if(!this.flag) return;
            this.flag = false;
            this.$http.get(`/Register/sendRegisterCode`,{
                mobile:this.phone
            }).then( res => {
                console.log(res)
                let time = null;
                let times = 60;
                if(res.code == 200){
                    time = setInterval( () => {
                        times -- ;
                        this.codetext = times + 's';
                        if(times <= 0){
                            times = 60;
                            this.flag = true;
                            this.codetext = '获取验证码';
                            clearInterval(time);
                        }
                    },1000)
                }else{
                    this.flag = true;
                    this.createToast(res.msg,'error')
                }
            })
        },
        submit(){
            var myreg=/^[1][1-9][0-9]{9}$/;
            if(!myreg.test(this.username)){
                this.createToast('手机格式不正确','error')
                return ;
            }
            if(!this.code){
                this.createToast('验证码不能为空','error')
                return;
            }
            if(!this.loginfag) return;
            this.loginfag = false;
            this.loading = true;
            this.$http.get(`/Register/checkRegisterCode`,{
                mobile:this.phone,
                registerCode:this.code,
                inviteCode:this.$route.query.inviteCode || ''
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    if(this.$route.name == 'login' && this.$route.query.inviteCode){
                        this.$router.push('/down')
                    }else if(res.data && res.data.needSetPwd){
						this.$router.push('/setpwd')
					}else if(res.data && res.data.needRedirect){
                        this.$router.push('/bindcode?to=login')
                    }else{
                        this.$router.push('/')
                    }
                }else{
                    this.createToast(res.msg,'error')
                }
                this.loginfag = true;
                this.loading = false;
            })
        },
        createToast(text,type){
            const toast = this.$createToast({
                time: 1000,
                txt: text,
                type:type
            })
            toast.show()
        }
    }
}
</script>
